<template>
  <div class="m-modal" ref="modalRef">
    <a-modal 
    v-model:visible="mVisible"
    :footer="!cFooter?null:undefined"
    v-bind="{
      ...$attrs,
      width: mFullscreen === true ? '100%' : $attrs?.width,
      wrapClassName: mFullscreen === true ? 'full-modal' : $attrs?.wrapClassName
    }"
    :getContainer="()=>modalRef">
      <template #[key]="data" v-for="(item, key) in $slots">
        <slot :name="key" v-bind="data || {}"></slot>
      </template>
      <template #closeIcon>
        <a-space @click="(e: Event)=>e.stopPropagation()">
          <FullscreenExitOutlined @click="handleFullscreen" v-if="mFullscreen" class="m-modal-close-icon" />
          <FullscreenOutlined @click="handleFullscreen" v-else class="m-modal-close-icon"/>
          <CloseOutlined class="m-modal-close-icon" @click="handleCancel" />
        </a-space>
      </template>
      <template #footer v-if="cFooter">
        <div class="m-dialog-footer">
        <slot name="appendBefore"></slot>
        <a-button v-bind="$attrs.cancelButtonProps || {}" v-if="showCancel !== false" @click="handleCancel">
          <slot name="cancelText">
            {{ $attrs.cancelText || '取消' }}
          </slot>
        </a-button>
        <slot name="appendCenter"></slot>
        <a-button v-bind="$attrs.okButtonProps || {}" v-if="showOk !== false" 
        :type="$attrs.okType	|| 'primary' " @click="handleOk">
          <slot name="okText">
            {{ $attrs.okText || '确定'}}
          </slot>
        </a-button>
        <slot name="appendAfter"></slot>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref, useSlots, watch } from 'vue'
  import { CloseOutlined,FullscreenOutlined,FullscreenExitOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    fullscreen: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    showOk: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    }
  })
  const emits = defineEmits(['update:visible','afterClose','ok','cancel'])
  const mVisible = ref(props.visible)
  watch(()=>props.visible,()=>{
    mVisible.value = props.visible
  })
  watch(()=>mVisible.value,()=>{
    emits('update:visible', mVisible.value)
    if(mVisible.value == false) {
      emits('afterClose')
    }
  })
  const mFullscreen = ref(props.fullscreen)
  const modalRef = ref()
  const slots = useSlots();
  const cFooter = computed<Boolean>(()=>{
    if(props.showOk !== false) {
      return true;
    }
    if(props.showCancel !== false) {
      return true;
    }
    if(Object.keys(slots).includes('appendBefore')) {
      return true;
    }
    if(Object.keys(slots).includes('appendCenter')) {
      return true;
    }
    if(Object.keys(slots).includes('appendAfter')) {
      return true;
    }
    return false;
})
  const handleFullscreen = () =>{
    mFullscreen.value = !mFullscreen.value
  }
  const handleCancel = () =>{
    mVisible.value = false;
    emits('update:visible', false)
    emits('cancel')
  }
  const handleOk = () =>{
    emits('ok')
  }
  defineExpose({
    openModal() {
      mVisible.value = true;
    },
    closeModal() {
      handleCancel()
    },
    setFullscreen(fullscreen: boolean) {
      mFullscreen.value = fullscreen
    }
  })
</script>
<style lang="less" scoped>
.m-dialog-footer {
  display: flex;
  justify-content: end;
}
::v-deep(.full-modal) {
  .ant-modal-close-x {
    cursor: auto;
    .m-modal-close-icon{
      cursor: pointer;
    }
  }
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>